<template>
<!-- 重复调用的提示界面 -->
    <div v-show="$store.state.infoWindow">
        <div class="bg"></div>
        <div class="tc">
            <!-- 右上角x号 -->
            <span @click="closeInfoWindow">X</span>
            <p class="err">
                <i :class="['iconfont', icon]"></i>
                {{msgees}}
            </p>
            <strong @click="closeInfoWindow">
                <i>SURE</i>
            </strong>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    props:['msgees','icon'],
    methods :{
        closeInfoWindow(){
            this.$store.commit('changeInfoWindow',false)
        }
    }
}
</script>
<style lang = "less" scoped>
    @import '../assets/base.less';
    .bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.4);
    }
    .tc {
        width: 300px;
        height: 180px;
        position: fixed;
        background-color: white;
        border-radius: 20px;
        box-shadow: 0 0 10px 10px #aaa;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        overflow: hidden;
        span {
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
        .err {
            font-family: 'KaiTi';
            text-align: center;
            margin-top: 80px;
            font-size: 20px;
            color: rgb(0, 0, 0);
            font-weight: bold;
        }
        strong{
            i{
                line-height: 100px;
                position: absolute;
                right: 0;
                bottom: -10px;
                transition: all 1s;
            }
            position: absolute;
            bottom: -50px;
            left: -50px;
            background-image: linear-gradient(90deg,skyblue,pink,yellow,orange,rgb(147, 78, 185));
            background-size: 500%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 1s;
            &:hover {
                transform: scale(1.5) rotateZ(360deg);  
                background-position-x: 100%;
                i{
                    bottom: 20px;
                    right: 15px;
                    color: white;
                    font-family: 'KaiTi';
                }
                &::before {
                    transform: scale(2);  
                    box-shadow: 0 0 rgb(28, 182, 200);   
                }
            }
            &::before{
                content: "";
                display: inline-block;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                position: absolute;
                transition: all .6s linear;
                box-shadow: 0 0 10px 10px transparent;
            }
        }
    }
</style>